<template>
  <div class="editAccount" v-loading="loading">
    <el-form label-width="110px" ref="form" :model="ruleForm">
      <el-row type="flex" justify="space-between">
        <el-col :span="12">
          <div class="title" style="margin: 6px 16px; font-size: 16px">
            投保人/被保险人信息
          </div>
        </el-col>
        <el-col :span="12"></el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="7">
          <el-form-item label="投保人" prop="insureName" :rules="[{ required: true, message: '请选择投保人', trigger: 'blur' }]">
            <el-input v-model="ruleForm.insureName" placeholder="请选择投保人" />
          </el-form-item>
        </el-col>
        <el-col :span="1">
          <el-button @click="insurerClick" native-type="button" type="text" size="small">常用</el-button>
        </el-col>
        <el-col :span="8">
          <el-form-item label="证件类型" prop="insureCertificateType" :rules="[
      { required: true, message: '请选择证件类型', trigger: 'blur' },
    ]">
            <el-select v-model="ruleForm.insureCertificateType" placeholder="请选择证件类型">
              <el-option v-for="item in columns" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="证件号码" prop="insureCertificateNumber">
            <el-input v-model="ruleForm.insureCertificateNumber" placeholder="请选择证件号码" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="12"></el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="7">
          <el-form-item label="被保险人" prop="insuredName" :rules="[
      { required: true, message: '请选择被保险人', trigger: 'blur' },
    ]">
            <el-input v-model="ruleForm.insuredName" placeholder="请选择被保险人" />
          </el-form-item>
        </el-col>
        <el-col :span="1">
          <el-button native-type="button" @click="insuredClick" type="text" size="small">常用</el-button>
        </el-col>
        <el-col :span="8">
          <el-form-item label="证件类型" prop="insuredCertificateType" :rules="[
      { required: true, message: '请选择证件类型', trigger: 'blur' },
    ]">
            <el-select v-model="ruleForm.insuredCertificateType" placeholder="请选择证件类型">
              <el-option v-for="item in columns" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="证件号码" prop="insuredCertificateNumber">
            <el-input v-model="ruleForm.insuredCertificateNumber" placeholder="请选择证件号码" />
          </el-form-item>
        </el-col>
      </el-row>

      <div class="title" style="margin: 6px 16px; font-size: 16px">
        联系人信息
      </div>

      <el-row type="flex">
        <el-col :span="8">
          <el-form-item label="联系人" prop="contactName" :rules="[{ required: true, message: '请输入联系人', trigger: 'blur' }]">
            <el-input v-model="ruleForm.contactName" placeholder="请输入联系人" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系方式" prop="contactPhone" :rules="[
      { required: true, message: '请输入联系方式', trigger: 'blur' },
    ]">
            <el-input v-model="ruleForm.contactPhone" placeholder="请输入联系方式" />
          </el-form-item>
        </el-col>
      </el-row>

      <div class="title" style="margin: 6px 16px; font-size: 16px">
        险种信息
      </div>

      <el-row type="flex">
        <el-col :span="8">
          <el-form-item label="险种选择" prop="insureKindId" :rules="[{ required: true, message: '请选择险种', trigger: 'blur' }]">
            <el-select @change="onInsureKindConfirm" v-model="ruleForm.insureKindId" placeholder="请选择险种">
              <el-option v-for="item in insureKindColumns" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <div class="title" style="margin: 6px 16px; font-size: 16px">
        货运信息
      </div>

      <el-row>
        <el-col :span="8">
          <el-form-item label="货物类型" prop="insureGoodsId" :rules="[{ required: true, message: '请选择货物名称', trigger: 'change' },]">
            <el-select @change="onGoodsNameConfirm" v-model="ruleForm.insureGoodsId" placeholder="请选择货物名称">
              <el-option v-for="item in goodsNameColumns" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="标记发票号码运单号" prop="tagInvoiceWaybill"
            :rules="[{ required: isHighway, message: '请输入标记发票号码运单号', trigger: 'blur' }]">
            <el-input v-model="ruleForm.tagInvoiceWaybill" placeholder="请输入请输入标记发票号码运单号" />
          </el-form-item>
        </el-col> -->
        <el-col :span="11">
          <el-form-item label="集装箱号" prop="containerNumber" :rules="[
      { required: !isHighway, message: '请输入标集装箱号', trigger: 'blur' },
      {
        validator: (rule, value, cb) =>
          checkContainerNumber(rule, value, cb),
      },
    ]">
            <el-row>
              <el-col :span="15"><el-input type="textarea" rows="4" @input="handleInput" v-model="ruleForm.containerNumber" placeholder="请输入集装箱号">
                </el-input></el-col>
              <el-col :span="4">
                <div>
                  <label for="fileInput" class="file-input-label">
                    <i class="el-icon-upload" style="font-size: 28px; color:#409EFF; cursor: pointer; margin-left:5px" title="点击上传">
                    </i>
                  </label>
                  <input type="file" id="fileInput" @change="handleFileUpload" style="display: none;">
                </div>
              </el-col>
              <el-col :span="5">
                <div class="demo-image__preview" title="点击放大">
                  <el-image style="width: 50px; height: 50px" :src="url" :preview-src-list="srcList">
                  </el-image>
                  <div style="font-size: 12px">上传示例</div>
                </div>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="箱量">
            <el-input v-model="containerNum" readonly />
          </el-form-item>
        </el-col>

      </el-row>
      <el-row type="flex">
        <!-- <el-col :span="8">
          <el-form-item label="包装与数量" prop="containerCount" :rules="[
      { required: isHighway, message: '请输入包装与数量', trigger: 'blur' },
      {
        validator: (rule, value, cb) =>
          checkContainerCount(rule, value, cb),
      },
    ]">
            <el-input v-model="ruleForm.containerCount" placeholder="请输入包装与数量" />
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="货物名称" prop="goodsName" :rules="[{ required: true, message: '请输入货物名称' }]">
            <el-autocomplete v-model="ruleForm.goodsName" :fetch-suggestions="querySearch" placeholder="请输入货物名称" @select="handleSelect"></el-autocomplete>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="包装" prop="packName" :rules="[{ required: true, message: '请选择包装', trigger: 'change' },]">
            <el-select v-model="ruleForm.packName" placeholder="请选择包装">
              <el-option v-for="item in packingColumns" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="运输方式" prop="transportTypeName" :rules="[{ required: true, message: '请选择运输方式', trigger: 'change' },]">
            <el-select v-model="ruleForm.transportTypeName" placeholder="请选择运输方式">
              <el-option v-for="item in transMethodColumns" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <!-- <el-col :span="8">
          <el-form-item label="运输工具" prop="transportTool" :rules="[
      { required: isHighway, message: '请输入运输工具', trigger: 'blur' },
    ]">
            <el-input :readonly="isHighway" v-model="ruleForm.transportTool" placeholder="请输入请输入运输工具" />
          </el-form-item>
        </el-col> -->
      </el-row>
      <!-- <el-row type="flex"> -->
      <!-- <el-col :span="8" prop="shipNumber">
          <el-form-item label="车牌号" prop="shipNumber">
            <el-input v-model="ruleForm.shipNumber" placeholder="请输入车牌号" />
          </el-form-item>
        </el-col> -->

      <!-- <el-col :span="8">
          <el-form-item label="中转地" prop="middlePlace">
            <el-cascader :options="options" v-model="ruleForm.middlePlace"></el-cascader>
          </el-form-item>
        </el-col> -->
      <!-- </el-row> -->

      <el-row type="flex">
        <el-col :span="8">
          <el-form-item label="启运地" prop="startPlace" :rules="[{ required: true, message: '请选择启运地', trigger: 'change' }]">
            <!-- <el-cascader :options="options" v-model="ruleForm.startPlace"></el-cascader> -->
            <el-input @focus="startPlaceFocus" v-model="ruleForm.startPlace" placeholder="请选择启运地" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="目的地" prop="endPlace" :rules="[{ required: true, message: '请选择目的地', trigger: 'change' }]">
            <el-input @focus="endPlaceFocus" v-model="ruleForm.endPlace" placeholder="请选择目的地" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="启运日期" prop="startTime" :rules="[{ required: true, message: '请选择启运日期', type: 'date', trigger: 'change' }]">
            <el-date-picker :picker-options="pickerOptions" v-model="ruleForm.startTime" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- <div class="title" v-if="info.insureRateExtends && !!info.insureRateExtends"
        style="margin: 6px 16px; font-size: 14px">
        扩展保险责任
      </div>
      <el-form-item name="checkboxGroup" label="扩展保险">
        <el-checkbox-group v-model="ruleForm.insureExtendIds" @change="insureExtendIdsChange">
          <el-checkbox v-for="(item, index) in info.insureRateExtends" :key="index" :label="item.insureExtendId"
            style="margin-bottom: 10px" shape="square">{{ item.extendInsureName }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item> -->
      <div class="title" style="margin: 6px 16px; font-size: 16px">
        费用信息
      </div>

      <el-row type="flex">
        <el-col :span="8">
          <el-form-item label="保险金额" prop="totalFee" :rules="[
      {
        required: true,
        message: '请输入保险金额（总货值）',
        trigger: 'blur',
      },
      {
        validator: (rule, value, cb) => checkFeeGoods(rule, value, cb),
      },
    ]">
            <el-input @input="totalFeeChange" v-model="ruleForm.totalFee" placeholder="请输入保险金额（总货值）" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="保险费率" required>
            <el-input v-model="ruleForm.insureRate" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="保险费用" required>
            <el-input v-model="ruleForm.insureFee" readonly />
          </el-form-item>
        </el-col>

      </el-row>

      <el-col :span="24">
        <el-form-item label="备注">
          <el-input type="textarea" v-model="ruleForm.remark" />
        </el-form-item>
      </el-col>

      <div class="title" style="margin: 6px 16px; font-size: 16px">说明</div>
      <p style="font-size:14px;color: rgb(135 135 135);line-height: 24px;">
      <ul v-if="!isHighway">
        <li>1、投保日期不能晚于启运日期</li>
        <li>2、船舶到港（含中转港）后投保，保单无效</li>
        <li>3、货物出险后投保，保单无效</li>
        <li>4、保险责任自签发保险凭证和保险货物启运地发货人的最后一个仓库或储运所时起，至该保险凭证上注明的目的地的收货人在当地的第一个仓库或储存所时终止</li>
        <li>5、本保险不予承保的货物为：退货、二手货物、危险品、 毒品、武器、弹药、打火机（灌气的）、蓄电池（有电解液）、现金、 珠宝首饰、有价证券、文件单证、信函邮票、古玩字画、古玩家具、
          放射性金属、核燃料、活牲畜、禽类、鱼虾水产品、蛋类、血制品以及条款规定的其它除外货物。</li>
        <li>6、任何投保货物，不论任何原因导致集装箱内的货物有异味串味或污染 ，均不在保险责任。</li>
        <li>7、粮食谷物饲料 : 散装货物封箱时,须锁好箱门4把锁具,采取施子弹封、加2道以上粗型螺丝的加固方式,否则发生货物撒漏、短少属于除外责任；退货、二手货物不在承保范围内。</li>
        <li>8、冷藏冷冻货物： 需用专业冷藏车或冷藏集装箱运输，若用非专业冷藏车进行运输，即使保单生效也不在保险责任范围内。</li>
        <li>9、启运地、中转地、目的地必须是中国大陆地区（不含港、澳、台,新疆、西藏、青海地区）保险责任开始后不可以撤销保单。</li>
      </ul>
      <ul v-if="isHighway">
        <li>1、投保日期必须与启运日期一致</li>
        <li>2、车辆已起运后投保，则保单无效；货物出险后投保，则保险责任不成立，即使保单已生效，保费也不予退还。</li>
        <li>3、保险责任自签发保险凭证和保险货物启运地发货人的最后一个仓库或储运所时起，至该保险凭证上注明的目的地的收货人在当地的第一个仓库或储存所时终止。</li>
        <li>4、本保险不予承保的货物为：退换货、危险品、 毒品、武器、弹药、打火机（灌气的）、蓄电池（有电解液）、现金、 珠宝首饰、有价证券、文件单证、信函邮票、古玩字画、古玩家具、
          放射性金属、核燃料、活牲畜、禽类、鱼虾水产品、蛋类、血制品以及条款规定的其它除外货物。</li>
        <li>5、任何投保货物，不论任何原因（交通事故除外）导致货物有异味串味或污染 ，均不在保险责任。</li>
        <li>6、粮食谷物饲料等散装货物，未发生交通事故，若货物发现撒漏、短少均属于除外责任；</li>
        <li>7、二手品（翻新机/中古机器等以旧翻新等货物）、展览后之展品和陈列品仅承保火灾爆炸、交通工具发生意外事故造成的损失，且赔偿限额以不超过新品价格的40%为限。裸装货物不负责锈损和刮擦导致的损失</li>
        <li>8、冷藏冷冻货物： 需用专业冷藏车或冷藏集装箱运输，若用非专业冷藏车进行运输，即使保单生效也不在保险责任范围内。</li>
        <li>
          9、保单覆盖地域范围:全部承运线路均在中华人民共和国境内（港、澳、台、新疆自治区、青海省除外）。起运地、目的地、中转地、承运线路途径地之一在保单覆盖地域范围以外地区的，无论损失发生在何地，保险人在任何情况下均不承担任何赔偿责任。
        </li>
      </ul>
      </p>
      <div class="title" style="margin: 6px 16px; font-size: 16px">免赔额</div>
      <p style="font-size:14px;color: rgb(135 135 135);line-height: 24px;">
      <ul>
        <li v-for="(item, index) in info.insureConfigDeductions" :key="index">{{ item.deductionType }}</li>
      </ul>
      </p>
      <div class="title" style="margin: 6px 16px; font-size: 16px">特别说明</div>
      <p style="font-size:14px;color: rgb(135 135 135);line-height: 24px;">
        本产品为海腾保险代理有限公司代理中国太平洋财产保险股份有限公司的保险产品。
      </p>
      <p style="font-size:14px; color:rgb(150, 150, 150); line-height: 18px;">
        保险人对本次投保所涉及的保险条款中包括但不限于责任免除条款、免赔额、免赔率、比例赔付或者给付等在内的免除或者减轻保险人责任的内容和条款，就其概念、内容及法律后果等向投保人作出了常人能够理解的解释说明，投保人已经充分理解并接受。投保人所选择的货物种类务必与实际运输货物一致，否则保险人不承担保险责任，由此导致的任何风险由投保人自行承担。
      </p>
      <div class="title" style="margin: 6px 16px; font-size: 16px">
        发票信息
      </div>
      <el-form-item label="是否开启发票">
        <el-checkbox v-model="ruleForm.invoiceStatus">开启发票</el-checkbox>
      </el-form-item>
      <el-form-item label="发票类型" v-if="ruleForm.invoiceStatus">
        <el-radio-group v-model="invoiceType" direction="horizontal">
          <el-radio :label="1">普票</el-radio>
          <el-radio :label="2">专票</el-radio>
        </el-radio-group>
      </el-form-item>

      <div v-if="ruleForm.invoiceStatus">
        <el-row>
          <el-col :span="7">
            <el-form-item label="发票抬头" prop="invoiceHead" :rules="[{ required: true, message: '请输入发票抬头', trigger: 'blur' }]">
              <el-input v-model="ruleForm.invoiceHead" />
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <el-button @click="commonInvoicesClick" native-type="button" type="text" size="small">常用</el-button>
          </el-col>
          <el-col :span="8">
            <el-form-item label="税号" prop="creditCode" :rules="[{ required: true, message: '请输入税号', trigger: 'blur' }]">
              <el-input v-model="ruleForm.creditCode" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收件人邮箱" prop="consigneeMail" :rules="[{ required: true, message: '请输入收件人邮箱', trigger: 'blur' }]">
              <el-input v-model="ruleForm.consigneeMail" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收件人电话">
              <el-input v-model="ruleForm.consigneePhone" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开户银行">
              <el-input v-model="ruleForm.bankBranchName" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="银行账号">
              <el-input v-model="ruleForm.bankAccount" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="电话号码">
              <el-input v-model="ruleForm.companyPhone" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单位地址">
              <el-input v-model="ruleForm.registerAddress" />
            </el-form-item>
          </el-col>

        </el-row>

      </div>

      <el-checkbox v-model="checked" style="font-size:14px">我已阅读并同意保险的免赔责任和投保声明
      </el-checkbox>
      <a @click.stop="agreement(0)" @click="() => showRecharge = true" class="agreement-box">《国内水路、陆路货物运输保险条款》</a>
      <a @click.stop="() => showCustomerNotification = true" style="margin-left:5px" class="agreement-box">《客户告知书》</a>
      <!-- <el-form-item label="备注">
        <el-input type="textarea" rows="2" show-word-limit maxlength="200" v-model="ruleForm.remark" />
      </el-form-item> -->
      <div style="margin: 16px">
        <el-button block type="primary" v-if="!$route.query.isDetail" :disabled="!checked" @click="onSubmit">{{
      $route.query.batchOrder ? '新增批单' :
        '立即投保' }}</el-button>
        <el-button block type="primary" v-if="$route.query.warrantyDarftId && !$route.query.isDetail" :disabled="!checked" @click="insureAndDel" native-type="button">投保并删除草稿</el-button>
        <el-button native-type="button" :disabled="!checked" v-if="!$route.query.isDetail && !$route.query.batchOrder" block @click="draftClick">暂存草稿</el-button>
        <!-- <el-button native-type="button" block
          @click="() => $router.go(-1)">返回</el-button> -->
      </div>
    </el-form>
    <el-dialog title="选择常用投保人" :visible.sync="insureShow" width="800px" class="dialog">
      <div v-if="!applicantList.length">
        <div>您还未添加投保人，点击可添加常用投保人</div>
        <el-button type="primary" size="small" @click="() => {
      $router.push(`/applicant?tempInput=1&insureInfoId=${$route.query.insureInfoId}&templateName=${$route.query.templateName}`)
      setInsuranceDataToCache()
    }">添加投保人</el-button>
      </div>
      <el-form label-width="80px">
        <div class="account-info" style="margin-top: 10px" v-for="(item, index) in applicantList" :key="index">
          <!-- <div><el-radio v-model="item.isTrue" @input="insureNameChange(item)" label="item.isTrue"></el-radio>{{
      item.insureName }}

          </div> -->
          <el-radio-group v-model="item.isTrue" @input="insureNameChange(item)">
            <el-radio :label="true">{{ item.insureName }}</el-radio>
          </el-radio-group>
          <el-row :gutter="5">
            <el-col :span="8">
              <el-form-item label="证件类型">
                {{item.insureCertificateType * 1 === 1 ? "身份证": "统一社会信用代码"}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="证件号码">
                {{ item.insureCertificateNumber }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系人">
                {{ item.contactName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系电话">
                {{ item.contactPhone }}
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="() => (insureShow = false)">取 消</el-button>
        <el-button type="primary" @click="insureSure">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="showRecharge" title="国内水路、陆路货物运输保险条款" width="1200px">
      <div style="padding: 16px; font-size: 12px; line-height: 18px">
        <div style="font-size: 14px; font-weight: bold; margin: 12px 0">
          第一条 总则
        </div>
        为使保险货物在水路、铁路、公路和联运运输中，因遭受保险责任范围内的自然灾害或意外事故所造成的损失能够得到经济补偿，并加强货物的安全防损工作，以利商品生产和商品流通，特举办保险。
        <div style="font-size: 14px; font-weight: bold; margin: 12px 0">
          第二条 保险责任
        </div>
        本保险分为基本险和综合险两种。保险货物遭受损失时，保险人按承保险别的责任范围负赔偿责任。
        （一）基本险
        1．因火灾、爆炸、雷电、冰雹、暴风、暴雨、洪水、地震、海啸、地陷、崖崩、滑坡、
        泥石流所造成的损失；
        2．由于运输工具发生碰撞、搁浅、触礁、倾覆、沉没、出轨或隧道、码头坍塌所造成
        的损失；
        3．在装货、卸货或转载时因遭受不属于包装质量不善或装卸人员违反操作规程所造成
        的损失；
        4．按国家规定或一般惯例应分摊的共同海损的费用；
        5．在发生上述灾害、事故时，因纷乱而造成货物的散失及因施救或保护货物所支付的
        直接合理的费用。
        （二）综合险
        本保险除包括基本险责任外，保险人还负责赔偿：
        1．因受震动、碰撞、挤压而造成货物破碎、弯曲、凹瘪、折断、开裂或包装破裂致使
        货物散失的损失；
        2．液体货物因受震动、碰撞或挤压致使所用容器（包括封口)损坏而渗漏的损失，或用
        液体保藏的货物因液体渗漏而造成保藏货物腐烂变质的损失；
        3．遭受盗窃或整件提货不着的损失；
        4．符合安全运输规定而遭受雨淋所致的损失。

        <div style="font-size: 14px; font-weight: bold; margin: 12px 0">
          第三条 除外责任
        </div>
        由于下列原因造成保险货物的损失，保险人不负赔偿责任：
        （一）战争或军事行动；
        （二）核事件或核爆炸；
        国内水路、陆路货物运输保险
        （三）保险货物本身的缺陷、自然损耗，以及货物包装不善；
        （四）被保险人的故意行为或过失；
        （五）全程是公路货物运输的，盗窃和整件提货不着的损失；
        （六）其他不属于保险责任范围内的损失。

        <div style="font-size: 14px; font-weight: bold; margin: 12px 0">
          第四条 责任起讫
        </div>
        保险责任自签发保险凭证和保险货物运离起运地发货人的最后一个仓库或储运处所时起，至该保险凭证上注明的目的地的收货人在当地的第一个仓库或储存处所时终止。但保险货物运抵目的地后，如果收货人未及时提货，则保险责任的终止期最多延长至以收货人接到《到货通知单》后的十五天为限（以邮戳日期为准）。
        <div style="font-size: 14px; font-weight: bold; margin: 12px 0">
          第五条 保险金额
        </div>
        保险价值为货物的实际价值，按货物的实际价值或货物的实际价值加运杂费确定。保险金额由投保人参照保险价值自行确定，并在保险合同中载明。保险金额不得超过保险价值。超过保险价值的，超过部分无效，保险人应当退还相应的保险费。
        <div style="font-size: 14px; font-weight: bold; margin: 12px 0">
          第六条 投保人、被保险人的义务
        </div>
        投保人应履行如实告知义务，如实回答保险人就保险标的或被保险人的有关情况提出的询问。投保人故意或者因重大过失未履行前款规定的如实告知义务，足以影响保险人决定是否同意承保或者提高保险费率的，保险人有权解除合同。保险合同自保险人的解约通知书到达投保人或被保险人时解除。投保人故意不履行如实告知义务的，保险人对于保险合同解除前发生的保险事故，不承担赔偿责任，并不退还保险费。投保人因重大过失未履行如实告知义务，对保险事故的发生有严重影响的，保险人对于保险合同解除前发生的保险事故，不承担赔偿责任，但应当退还保险费
        <div style="font-size: 14px; font-weight: bold; margin: 12px 0">
          第七条
        </div>
        投保人在保险人签发保险凭证的同时，应按照保险费率，一次交清应付的保险费。若投保人未按照约定交付保险费，保险费交付前发生的保险事故，保险人不承担赔偿责任。
        <div style="font-size: 14px; font-weight: bold; margin: 12px 0">
          第八条
        </div>
        被保险人应严格遵守国家及交通运输部门关于安全运输的各项规定。还应当接受并协助保险人对保险货物进行的查验防损工作，货物包装必须符合国家和主管部门规定的标准。对于因被保险人未遵守上述约定而导致保险事故的，保险人不负赔偿责任；对于因被保险人未遵守上述约定而导致损失扩大的，保险人对扩大的损失不负赔偿责任。
        <div style="font-size: 14px; font-weight: bold; margin: 12px 0">
          第九条
        </div>
        货物如果发生保险责任范围内的损失时，被保险人获悉后，应立即通知保险人的当地保险机构并应迅速采取施救和保护措施防止或减少货物损失。故意或者因重大过失未及时通知，致使保险事故的性质、原因、损失程度等难以确定的，国内水路、陆路货物运输保险

        保险人对无法确定的部分，不承担赔偿责任，但保险人通过其他途径已经及时知道或者应当及时知道保险事故发生的除外。赔偿处理

        <div style="font-size: 14px; font-weight: bold; margin: 12px 0">
          第十条
        </div>
        被保险人向保险人申请索赔时，必须提供下列有关单证：
        （一）保险凭证、运单（货票）、提货单、发货票；
        （二）承运部门签发的货运记录、普通记录、交接验收记录、鉴定书；
        （三）收货单位的入库记录、检验报告、损失清单及救护货物所支付的直接费用的单据。

        收到被保险人的赔偿请求后，应当及时就是否属于保险责任作出核定，并将核定结果通知被保险人。情形复杂的，保险人在收到被保险人的赔偿请求并提供理赔所需资料后三十日内未能核定保险责任的，保险人与被保险人根据实际情形商议合理期间，保险人在商定的期间内作出核定结果并通知被保险人。对属于保险责任的，在与被保险人达成有关赔偿金额的协议后十日内，履行赔偿义务。
        <div style="font-size: 14px; font-weight: bold; margin: 12px 0">
          第十一条
        </div>
        货物发生保险责任范围内的损失时，按货价确定保险金额的，保险人根据实际损失按起运地货价计算赔偿；按货价加运杂费确定保险金额的，保险人根据实际损失按起运地货价加运杂费计算。但最高赔偿金额以保险金额为限。
        <div style="font-size: 14px; font-weight: bold; margin: 12px 0">
          第十二条
        </div>
        如果被保险人投保不足，保险金额低于货价时，保险人对其损失金额及支付的施救保护费用按保险金额与货价的比例计算赔偿。保险人对货物损失的赔偿金额，以及因施救或保护货物所支付的直接、合理的费用，应分别计算，并各以不超过保险金额为限。
        <div style="font-size: 14px; font-weight: bold; margin: 12px 0">
          第十三条
        </div>
        货物发生保险责任范围内的损失，如果根据法律规定或者有关约定，应当由承运人或其他第三者负责赔偿部分或全部的，被保险人应首先向承运人或其他第三者索赔。如被保险人提出要求，保险人也可以先予赔偿，但被保险人应签发权益转让书给保险人，并协助保险人向责任方追偿。
        <div style="font-size: 14px; font-weight: bold; margin: 12px 0">
          第十四条
        </div>
        经双方协商同意，保险人可将其享有的保险财产残余部分的权益作价折归被保险人，并可在保险赔偿金中直接扣除。
        <div style="font-size: 14px; font-weight: bold; margin: 12px 0">
          第十五条
        </div>
        被保险人与保险人发生争议时，应当实事求是，协商解决，双方不能达成协议时，可以提交仲裁机关或法院处理。

        本保险合同适用中华人民共和国法律(不包括港澳台地区法律）。
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="() => showRecharge = false">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="选择发票信息" :visible.sync="invoicesShow" width="1000px" class="dialog">
      <div v-if="!invoiceList.length">
        <div>您还未添加发票，点击可添加发票</div>
        <el-button type="primary" size="small" @click="() => {
      $router.push({ path: 'invoiceMsg', query: { showInsured: true, insureInfoId: $route.query.insureInfoId, templateName: $route.query.templateName } })
      setInsuranceDataToCache()
    }">添加发票</el-button>
      </div>
      <el-form label-width="100px">
        <el-card class="box-card" shadow="never" v-for="(item, index) in invoiceList" :key="index">
          <div slot="header" class="clearfix">
            <el-radio-group v-model="item.isTrue" @input="invoiceChange(item)">
              <el-radio :label="true">{{ item.invoiceHead }}</el-radio>
            </el-radio-group>
          </div>
          <div class="account-info">

            <el-row :gutter="5">
              <el-col :span="8">
                <el-form-item label="发票抬头">
                  {{ item.invoiceHead }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="税号">
                  {{ item.creditCode }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="收件人邮箱">
                  {{ item.consigneeMail }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="收件人电话">
                  {{ item.consigneePhone }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="开户银行">
                  {{ item.bankBranchName }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="银行账户">
                  {{ item.bankAccount }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="电话号码">
                  {{ item.companyPhone }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="单位地址">
                  {{ item.registerAddress }}
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="() => (invoicesShow = false)">取 消</el-button>
        <el-button type="primary" @click="invoiceSure">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="选择被保险人" :visible.sync="insuredShow" width="800px" class="dialog">
      <div v-if="!insuredList.length">
        <div>您还未添加被保险人，点击可添加被保险人</div>
        <el-button type="primary" size="small" @click="() => {
      $router.push({ path: 'insured', query: { showInsured: true, insureInfoId: $route.query.insureInfoId, templateName: $route.query.templateName } })
      setInsuranceDataToCache()
    }">添加被保险人</el-button>
      </div>
      <el-form label-width="80px">
        <div class="account-info" style="margin-top: 10px" v-for="(item, index) in insuredList" :key="index">
          <el-radio-group v-model="item.isTrue" @input="insuredNameChange(item)">
            <el-radio :label="true">{{ item.insuredName }}</el-radio>
          </el-radio-group>

          <el-row :gutter="5">
            <el-col :span="8">
              <el-form-item label="证件类型">
                {{
      item.insuredCertificateType * 1 === 1
        ? "身份证"
        : "统一社会信用代码"
    }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="证件号码">
                {{ item.insuredCertificateNumber }}
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="() => (insuredShow = false)">取 消</el-button>
        <el-button type="primary" @click="insuredSure">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="支付" :visible.sync="payVisible" width="30%" :before-close="() => payVisible = false">
      <el-form :model="payForm" :rules="payRules" ref="payForm" label-width="90px" class="pay">
        <el-form-item label="订单号">
          {{ orderNum }}
        </el-form-item>
        <el-form-item label="保费金额">
          {{ ruleForm.insureFee }}
        </el-form-item>
        <el-form-item label="支付密码" prop="walletPassword">
          <el-input placeholder="请输入密码" v-model="payForm.walletPassword" :maxlength="6" show-password></el-input>
        </el-form-item>
      </el-form>
      <p v-if="!!this.$route.query.batchOrder" style="color:red">批单审批通过后，原订单金额会原路退回。</p>
      <p style="color:red">支付密码不是6位数字的客户，请在【管理中心】-【支付密码】中，尽快重新设置支付密码为6位数字</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="payVisible = false">取 消</el-button>
        <el-button type="primary" @click="payDetermine">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="客户告知书" :visible.sync="showCustomerNotification">
      <iframe src="http://f.huibaohulian.com/customer_notice.pdf" style="width:100%;height:1000px;border:none"></iframe>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showCustomerNotification = false">确 定</el-button>
      </span>
    </el-dialog>

    <selecteCity ref="startPlace" @getCityName="getCityName"></selecteCity>
    <selecteCity ref="endPlace" @getCityName="getEndCityName"></selecteCity>
  </div>
</template>

<script>
import notice from "@/assets/notice.png";
import example from "@/assets/example.png";
import { provinceAndCityData } from "element-china-area-data";
import { deepClone } from "@/utils/func";
import selecteCity from "@/components/selecteCity.vue";
const Decimal = require("decimal.js");
const reg =
  /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i;
const reg2 = /^[0-9A-Z]{18}$/;
const reg3 = /^\d+$/;
const reg4 = /^[A-Z]{4}\d{7}$/;
const reg5 = /^\d*\.?\d+$/;
import { documentType } from "@/utils/options";
import * as XLSX from "xlsx";
import moment from "moment";
export default {
  components: {
    selecteCity,
  },
  computed: {
    discountRate() {
      const userInfo = localStorage.getItem("userInfo");
      if (userInfo) {
        return JSON.parse(userInfo).discountRate;
      }
      return 0;
    },
    packingColumns() {
      const val = this.ruleForm.goodsType || "";
      if (val.includes("粮谷类") || val.includes("饲料类")) {
        return ["箱装", "桶装", "罐装", "散装", "袋装"];
      } else if (
        val.includes("五金类") ||
        val.includes("化工品类") ||
        val.includes("轻工品类-塑料制品") ||
        val.includes("轻工品类-轻工品类（非易碎）")
      ) {
        return ["箱装", "桶装", "罐装", "散装", "袋装", "托盘"];
      } else if (
        val.includes("机械设备类") ||
        val.includes("轻工品类-玻璃、陶瓷、搪瓷等易碎品类")
      ) {
        return ["箱装", "桶装", "盘卷包装", "散装", "袋装", "托盘"];
      } else {
        return ["箱装", "桶装", "罐装", "散装", "袋装", "托盘", "盘卷包装"];
      }
    },
    transMethodColumns() {
      const item =
        this.info.insureRateKinds &&
        this.info.insureRateKinds.find(
          (a) => a.insureKindId === this.ruleForm.insureKindId
        );
      return item && item.insureKindName === "水路货运险"
        ? ["海运", "集装箱海运", "水运", "联运"]
        : ["公路"];
    },
    isHighway() {
      return this.$route.query.templateName.includes("公路");
    },
    containerNum: {
      get() {
        const num = this.ruleForm.containerNumber;
        if (!num) {
          return 0;
        }
        return num.split("\n").filter((item) => item != "").length;
      },
      set() {},
    },
  },
  data() {
    return {
      restaurants: [],
      loading: false,
      goStatus: 1,
      url: example,
      srcList: [example],
      isInsureAndDel: false,
      pickerOptions: {
        disabledDate(time) {
          const today = new Date();
          const yesterday = new Date(today);
          yesterday.setDate(yesterday.getDate() - 2);
          return time.getTime() < yesterday;
        },
      },
      value1: "",
      showCustomerNotification: false,
      notice,
      checked: false,
      showRecharge: false,
      payForm: { walletPassword: "" },
      payRules: {
        walletPassword: [
          { required: true, message: "请输入支付密码", trigger: "blur" },
        ],
      },
      payVisible: false,
      options: provinceAndCityData,
      showKeyboard: true,
      showPayment: true,
      errorInfo: "",

      insureId: "",
      insuredId: "",
      insureKindColumns: [],
      goodsNameColumns: [],
      showCalendar: false,
      showEndArea: false,
      columns: documentType,
      showInsuredPicker: false,

      ruleForm: {
        startTime: "", //String**启运时间 （必须）

        insureName: "",
        insureCertificateType: "1",
        insureCertificateNumber: "",

        insuredName: "",
        insuredCertificateType: "1",
        insuredCertificateNumber: "",

        goodsName: "", //货物名称
        // middlePlace: [], //中转地
        transportTypeName: "", //运输方式
        // transportTool: "", //运输工具
        packName: "", //包装

        contactName: "", //String**联系人姓名  （必须）
        contactPhone: "", //String**联系人电话  （必须）
        insureKindId: "", //Long**险种id  （必须）
        insureGoodsId: "", //Long**货物类型id （必须）
        goodsType: "", //String**货物类型 （必须）
        containerNumber: "", //String**集装箱号 以;隔开（必须）
        // containerCount: 0, //String**包装与数量 （必须）
        // tagInvoiceWaybill: "", //String**标记发票号码运单号 （必须）
        // shipNumber: "", //String**船名航次 （必须）
        startPlace: "", //String**启运地 （必须）
        endPlace: "", //String**目的地 （必须）

        insureExtendIds: [], //String**扩展保险 以;隔开（必须）
        totalFee: "", //BigDecimal**保险总金额 （必须）
        insureRate: "", //BigDecimal**保险费率 单=位%（必须）
        insureFee: "0.00", //BigDecimal**余额 （必须）

        invoiceStatus: false, //String**发票状态 0=不需要,1=普票,2=专票（必须）
        invoiceHead: "", // String**发票抬头
        consigneePhone: "", // String**收货人电话
        consigneeAddress: "", // String**收货人地址
        registerAddress: "", // String**注册地址
        creditCode: "", //String**统一社会信用代码
        consigneeMail: "", //String**收件人邮箱
        companyPhone: "", //String**电话号码
        bankAccount: "", //String**银行账号
        bankBranchName: "", //String**支行名称

        remark: "",
      },
      invoiceType: 1,
      insureShow: false,
      invoicesShow: false,
      insuredShow: false,
      username: "",
      password: "",

      radio: "",
      checkboxGroup: [],
      applicantList: [],
      invoiceList: [],
      insuredList: [],
      info: {},
      orderNum: "",
      oriFeeRate: "",
      minCost: 0,
    };
  },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      console.log(results, "results");
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    getEndCityName(data) {
      this.ruleForm.endPlace = data;
    },
    endPlaceFocus() {
      this.$refs.endPlace.dialogVisible = true;
      this.$refs.endPlace.state = "";
      this.$refs.endPlace.getLocalCityName();
    },
    startPlaceFocus() {
      this.$refs.startPlace.dialogVisible = true;
      this.$refs.startPlace.state = "";
      this.$refs.startPlace.getLocalCityName();
    },
    getCityName(data) {
      this.ruleForm.startPlace = data;
    },
    handleFileUpload(event) {
      const file = event.target.files[0];
      if (
        file.type ===
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
        file.type === "application/vnd.ms-excel"
      ) {
        const reader = new FileReader();
        reader.onload = (e) => {
          const data = new Uint8Array(e.target.result);
          const workbook = XLSX.read(data, { type: "array" });
          const sheetName = workbook.SheetNames[0];
          const sheet = workbook.Sheets[sheetName];
          const jsonData = XLSX.utils.sheet_to_json(sheet, { header: 1 });
          if (Array.isArray(jsonData) && jsonData.length) {
            this.ruleForm.containerNumber = jsonData.join("\n");
          }
        };
        reader.readAsArrayBuffer(file);
      } else {
        this.$message.warning("请选择一个Excel文件");
      }
    },
    deleteDraft() {
      const url = "/warranty/darft/remove";
      const params = { warrantyDarftId: this.$route.query.warrantyDarftId };
      this.$post(url, params).then((res) => {
        if (res && res.code * 1 === 200) {
          this.$router.push("/reviewPolicy");
        }
      });
    },
    getAccountInfo() {
      const params = {
        insureName: this.ruleForm.insureName,
        insureCertificateType:
          this.ruleForm.insureCertificateType === "身份证"
            ? "1"
            : this.ruleForm.insureCertificateType === "统一社会信用代码"
            ? "2"
            : this.ruleForm.insureCertificateType,
        insureCertificateNumber: this.ruleForm.insureCertificateNumber,

        insuredName: this.ruleForm.insuredName,
        insuredCertificateType:
          this.ruleForm.insuredCertificateType === "身份证"
            ? "1"
            : this.ruleForm.insuredCertificateType === "统一社会信用代码"
            ? "2"
            : this.ruleForm.insuredCertificateType,
        insuredCertificateNumber: this.ruleForm.insuredCertificateNumber,

        contactName: this.ruleForm.contactName, //String**联系人姓名  （必须）
        contactPhone: this.ruleForm.contactPhone, //String**联系人电话  （必须）
      };
      return params;
    },
    setAccountInfo(data) {
      this.ruleForm.insureName = data.insureName;
      this.ruleForm.insureCertificateType = data.insureCertificateType;
      this.ruleForm.insureCertificateNumber = data.insureCertificateNumber;
      this.ruleForm.insuredName = data.insuredName;
      this.ruleForm.insuredCertificateType = data.insuredCertificateType;
      this.ruleForm.insuredCertificateNumber = data.insuredCertificateNumber;
      this.ruleForm.contactName = data.contactName;
      this.ruleForm.contactPhone = data.contactPhone;
    },
    setInsuranceDataToCache() {
      localStorage.setItem("insuranceData", JSON.stringify(this.getParams()));
    },
    setOftenInsuranceData() {
      localStorage.setItem(
        "oftenInsuranceData",
        JSON.stringify(this.getAccountInfo())
      );
    },
    setOftenInvoiceData() {
      localStorage.setItem(
        "oftenInvoiceData",
        JSON.stringify(this.getInvoiceData())
      );
    },
    getInvoiceData() {
      return {
        invoiceStatus: this.ruleForm.invoiceStatus, //String**发票状态 0=不需要,1=普票,2=专票（必须）
        invoiceHead: this.ruleForm.invoiceHead, // String**发票抬头
        consigneePhone: this.ruleForm.consigneePhone, // String**收货人电话
        consigneeAddress: this.ruleForm.consigneeAddress, // String**收货人地址
        registerAddress: this.ruleForm.registerAddress, // String**注册地址
        creditCode: this.ruleForm.creditCode, //String**统一社会信用代码
        consigneeMail: this.ruleForm.consigneeMail, //String**收件人邮箱
        companyPhone: this.ruleForm.companyPhone, //String**电话号码
        bankAccount: this.ruleForm.bankAccount, //String**银行账号
        bankBranchName: this.ruleForm.bankBranchName, //String**支行名称
      };
    },
    checkFeeGoods(rule, value, cb) {
      if (!reg5.test(value)) {
        cb("请输入数字");
      }
      cb();
    },
    handleInput() {
      if (!this.ruleForm.containerNumber) {
        this.ruleForm.containerNumber = "";
        return;
      }
      if (this.ruleForm.containerNumber.replace(/\n/g, "").length % 11 === 0) {
        this.ruleForm.containerNumber += "\n";
      }

      this.ruleForm.containerNumber = this.ruleForm.containerNumber.replace(
        /(\r?\n)+/g,
        "\n"
      );
    },
    checkContainerNumber(rule, value, cb) {
      let flag = true;
      const valArr = value.split(/\r?\n/g);
      valArr.forEach((item) => {
        if (item && !reg4.test(item)) {
          flag = false;
        }
      });
      if (!flag) {
        cb("格式应为4个大写字母+7位数字");
      }
      cb();
    },
    checkContainerCount(rule, value, cb) {
      if (!reg3.test(value)) {
        cb("请输入数字");
      }
      cb();
    },
    totalFeeChange(val) {
      if (!this.ruleForm.insureKindId) {
        this.$message.warning("请选择险种");
        this.ruleForm.totalFee = "";
        return;
      }
      if (!this.ruleForm.insureGoodsId) {
        this.$message.warning("请选择货物类型");
        this.ruleForm.totalFee = "";
        return;
      }
      this.setInsureFee(val);
    },
    insureExtendIdsChange(names) {
      if (!this.ruleForm.insureKindId) {
        this.$message.warning("请选择险种");
        this.ruleForm.totalFee = "";
        this.ruleForm.insureExtendIds = [];
        return;
      }
      if (!this.ruleForm.insureGoodsId) {
        this.$message.warning("请选择货物类型");
        this.ruleForm.totalFee = "";
        this.ruleForm.insureExtendIds = [];
        return;
      }
      const list = this.info.insureRateExtends.filter((item) =>
        names.includes(String(item.insureExtendId))
      );
      let sum = this.oriFeeRate ? new Decimal(this.oriFeeRate) : new Decimal(0);

      list.forEach((item) => {
        sum = sum.plus(new Decimal(item.extendInsureRate)); // 使用.plus方法进行精确加法
      });
      this.ruleForm.insureRate = sum.toString();

      if (this.ruleForm.totalFee) {
        this.setInsureFee(this.ruleForm.totalFee);
      }
    },
    setInsureFee(val) {
      console.log("val", val);
      const num1 = new Decimal(this.ruleForm.insureRate);
      const num2 = val ? new Decimal(val) : Decimal(0);
      const num3 = new Decimal(100);
      const fee = num1.times(num2).dividedBy(num3).toString();
      const insureFee = Number(fee).toFixed(2);
      this.ruleForm.insureFee =
        insureFee > this.minCost ? insureFee : this.minCost;
    },
    onGoodsNameConfirm(val) {
      this.ruleForm.packName = "";
      const item = this.info.insureRateKinds.find(
        (a) => a.insureKindId === this.ruleForm.insureKindId
      );
      item.insureRateGoodss.forEach((e) => {
        if (e.insureGoodsId === val) {
          const num1 = new Decimal(e.goodsTypeRate);
          const num2 = new Decimal(this.discountRate);
          const num3 = num1.minus(num2).toString();
          this.ruleForm.insureRate = num3;
          this.oriFeeRate = deepClone(num3);
        }
      });
      if (this.ruleForm.totalFee) {
        this.setInsureFee(this.ruleForm.totalFee);
      }
    },
    onInsureKindConfirm(val) {
      this.ruleForm.packName = "";
      this.ruleForm.transportTool = "";
      this.goodsType = "";
      const item = this.info.insureRateKinds.filter(
        (a) => a.insureKindName === val
      );
      if (item) {
        this.goodsNameColumns = item.map((a) => {
          return {
            label: a.goodsTypeName,
            value: a.insureGoodsId,
          };
        });
      }
    },
    insureSure() {
      this.applicantList.forEach((item) => {
        if (item.isTrue) {
          this.ruleForm.insureName = item.insureName;
          this.ruleForm.insureCertificateType = item.insureCertificateType;
          this.ruleForm.insureCertificateNumber = item.insureCertificateNumber;
          this.insureId = item.insureId;
          this.ruleForm.contactName = item.contactName;
          this.ruleForm.contactPhone = item.contactPhone;
        }
      });
      this.$refs.form.validateField("insureName");
      this.$refs.form.validateField("insureCertificateType");
      this.$refs.form.validateField("insureCertificateNumber");
      this.$refs.form.validateField("contactName");
      this.$refs.form.validateField("contactPhone");
      this.insureShow = false;
    },
    invoiceSure() {
      this.invoiceList.forEach((item) => {
        if (item.isTrue) {
          this.ruleForm.invoiceHead = item.invoiceHead;
          this.ruleForm.creditCode = item.creditCode;
          this.ruleForm.consigneeMail = item.consigneeMail;
          this.ruleForm.companyPhone = item.companyPhone;
          this.ruleForm.bankBranchName = item.bankBranchName;
          this.ruleForm.bankAccount = item.bankAccount;
          this.ruleForm.companyPhone = item.companyPhone;
          this.ruleForm.registerAddress = item.registerAddress;
          this.ruleForm.consigneePhone = item.consigneePhone;
          this.ruleForm.consigneeAddress = item.consigneeAddress;
        }
      });
      this.$refs.form.validateField("invoiceHead");
      this.$refs.form.validateField("creditCode");
      this.$refs.form.validateField("consigneeMail");
      this.invoicesShow = false;
    },
    insuredSure() {
      this.insuredList.forEach((item) => {
        if (item.isTrue) {
          this.ruleForm.insuredName = item.insuredName;
          this.ruleForm.insuredCertificateType = item.insuredCertificateType;
          this.ruleForm.insuredCertificateNumber =
            item.insuredCertificateNumber;
          this.insuredId = item.insuredId;
        }
      });
      this.$refs.form.validateField("insuredName");
      this.$refs.form.validateField("insuredCertificateType");
      this.$refs.form.validateField("insuredCertificateNumber");
      this.insuredShow = false;
    },
    checkDocument(rule, value, cb) {
      if (!reg.test(value) || !reg2.test(value)) {
        cb("请输入正确的证件号码");
      }
      cb();
    },
    onInsureConfirm(insureCertificateType) {
      this.insureCertificateType = insureCertificateType;
    },
    onInsuredConfirm(insuredCertificateType) {
      this.insuredCertificateType = insuredCertificateType;
      this.showInsuredPicker = false;
    },
    insureNameChange(item) {
      this.applicantList.forEach((a) => {
        if (a.insureId === item.insureId) {
          this.$set(item, "isTrue", !a.isTrue);
          item.isTrue = !a.isTrue;
        } else {
          this.$set(a, "isTrue", false);
          a.isTrue = false;
        }
      });
    },
    invoiceChange(item) {
      this.invoiceList.forEach((a) => {
        if (a.invoiceId === item.invoiceId) {
          this.$set(item, "isTrue", !a.isTrue);
          item.isTrue = !a.isTrue;
        } else {
          this.$set(a, "isTrue", false);
          a.isTrue = false;
        }
      });
    },
    insuredNameChange(item) {
      this.insuredList.forEach((a) => {
        if (a.insureId === item.insureId) {
          this.$set(item, "isTrue", !a.isTrue);
          item.isTrue = !a.isTrue;
        } else {
          this.$set(a, "isTrue", false);
          a.isTrue = false;
        }
      });
    },
    getApplicantList() {
      return this.$get("/config/insure/list").then((res) => {
        if (res && res.code * 1 === 200) {
          this.applicantList = res.data;
          this.applicantList.forEach((item) => {
            this.$set(item, "isTrue", false);
          });
        } else {
          this.applicantList = [];
        }
        return this.applicantList;
      });
    },
    getInvoicesList() {
      return this.$get("/config/invoice/list").then((res) => {
        if (res && res.code * 1 === 200) {
          this.invoiceList = res.data;
          this.invoiceList.forEach((item) => {
            this.$set(item, "isTrue", false);
          });
        } else {
          this.invoiceList = [];
        }
        return this.invoiceList;
      });
    },
    getInsuredList() {
      return this.$get("/config/insured/list").then((res) => {
        if (res && res.code * 1 === 200) {
          this.insuredList = res.data;
          this.insuredList.forEach((item) => {
            this.$set(item, "isTrue", false);
          });
        } else {
          this.insuredList = [];
        }
        return this.insuredList;
      });
    },
    insurerClick() {
      this.insureShow = true;
    },
    commonInvoicesClick() {
      this.invoicesShow = true;
    },
    insuredClick() {
      this.insuredShow = true;
    },
    draftClick() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.loading) {
            return;
          }
          this.loading = true;
          const url = this.warrantyDarftId
            ? "/warranty/darft/update"
            : "/warranty/darft/add";
          const params = this.warrantyDarftId
            ? { ...this.getParams(), warrantyDarftId: this.warrantyDarftId }
            : this.getParams();
          this.$post(url, params)
            .then((res) => {
              if (res && res.code === 200) {
                this.$message.success("操作成功");
                this.$router.push({
                  path: "/policyDraft",
                  query: {
                    active: 1,
                  },
                });
              }
            })
            .finally(() => {
              this.loading = false;
            });
        }
      });
    },
    getParams() {
      const str = this.ruleForm.containerNumber.replace(/(\r\n|\n|\r)/gm, ""); // 去掉换行符或回车键
      let result = "";
      for (var i = 0; i < str.length; i += 11) {
        result += str.slice(i, i + 11) + ";"; // 每11个字符用;分割
      }
      result = result.slice(0, -1); // 去掉最后一个;
      const insureGoodsItem = this.goodsNameColumns.find(
        (item) => item.value === this.ruleForm.insureGoodsId
      );
      const goodsType = insureGoodsItem ? insureGoodsItem.label : "";
      const params = {
        insureInfoId: this.$route.query.insureInfoId,
        insureId: this.insureId,
        insuredId: this.insuredId,
        insureName: this.ruleForm.insureName,
        insureCertificateType:
          this.ruleForm.insureCertificateType === "身份证"
            ? "1"
            : this.ruleForm.insureCertificateType === "统一社会信用代码"
            ? "2"
            : this.ruleForm.insureCertificateType,
        insureCertificateNumber: this.ruleForm.insureCertificateNumber,

        insuredName: this.ruleForm.insuredName,
        insuredCertificateType:
          this.ruleForm.insuredCertificateType === "身份证"
            ? "1"
            : this.ruleForm.insuredCertificateType === "统一社会信用代码"
            ? "2"
            : this.ruleForm.insuredCertificateType,
        insuredCertificateNumber: this.ruleForm.insuredCertificateNumber,

        contactName: this.ruleForm.contactName, //String**联系人姓名  （必须）
        contactPhone: this.ruleForm.contactPhone, //String**联系人电话  （必须）
        insureKindId: this.ruleForm.insureKindId, //Long**险种id  （必须）
        insureGoodsId: this.ruleForm.insureGoodsId, //Long**货物类型id （必须）
        goodsType, //String**货物类型 （必须）
        containerNumber: result, //String**集装箱号 以;隔开（必须）
        // containerCount: this.ruleForm.containerCount, //String**包装与数量 （必须）
        goodsName: this.ruleForm.goodsName, //String**货物名称 （必须）
        // middlePlace: this.ruleForm.middlePlace
        //   ? this.ruleForm.middlePlace.join("/")
        //   : "", //String**中转 （必须）
        remark: this.ruleForm.remark, //String**备注
        transportTypeName: this.ruleForm.transportTypeName, //String**货物名称 （必须）
        // transportTool: this.ruleForm.transportTool, //String**运输工具 （必须）
        packName: this.ruleForm.packName, //String**包装 （必须）
        // tagInvoiceWaybill: this.ruleForm.tagInvoiceWaybill, //String**标记发票号码运单号 （必须）
        // shipNumber: this.ruleForm.shipNumber, //String**船名航次 （必须）
        startPlace: this.ruleForm.startPlace, //String**启运地 （必须）
        endPlace: this.ruleForm.endPlace, //String**目的地 （必须）
        startTime: moment(this.ruleForm.startTime).format("YYYY-MM-DD"), //String**启运时间 （必须）
        insureExtendIds: this.ruleForm.insureExtendIds
          ? this.ruleForm.insureExtendIds.join(";")
          : "", //String**扩展保险 以;隔开（必须）
        totalFee: this.ruleForm.totalFee, //BigDecimal**保险总金额 （必须）
        insureRate: this.ruleForm.insureRate, //BigDecimal**保险费率 单=位%（必须）
        insureFee: this.ruleForm.insureFee, //BigDecimal**余额 （必须）
        // invoiceType: this.ruleForm.invoiceType, //String**发票类型
        invoiceStatus: this.ruleForm.invoiceStatus ? this.invoiceType : 0, //String**发票状态 0=不需要,1=普票,2=专票（必须）
      };
      if (this.ruleForm.invoiceStatus) {
        params.consigneePhone = this.ruleForm.consigneePhone; // String**收货人电话
        params.consigneeAddress = this.ruleForm.consigneeAddress;
        params.invoiceHead = this.ruleForm.invoiceHead; // String**发票抬头
        params.registerAddress = this.ruleForm.registerAddress; // String**注册地址
        params.creditCode = this.ruleForm.creditCode; //String**统一社会信用代码
        params.consigneeMail = this.ruleForm.consigneeMail; //String**收件人邮箱
        params.companyPhone = this.ruleForm.companyPhone; //String**电话号码
        params.bankAccount = this.ruleForm.bankAccount; //String**银行账号
        params.bankBranchName = this.ruleForm.bankBranchName; //String**支行名称
      }
      return params;
    },
    insureAndDel() {
      this.isInsureAndDel = true;
      this.submitFunc();
    },
    getWallerData() {
      return this.$post("/customer/wallet/info").then((res) => {
        if (res && res.code * 1 === 200) {
          return res.data.walletPassSatus;
        }
      });
    },
    onSubmit() {
      this.getWallerData().then((res) => {
        if (res) {
          this.isInsureAndDel = false;
          this.submitFunc();
        } else {
          this.$confirm(
            "系统监测您还未设置支付密码，请先设置支付密码",
            "提示",
            {
              confirmButtonText: "确定",
              type: "warning",
              showClose: false,
              showCancelButton: false,
            }
          ).then(() => {
            window.open("/#/payPassword", "_blank");
          });
        }
      });
    },

    setGoodsNameList() {
      const goodsNameListStr = localStorage.getItem("goodsNameList");
      if (goodsNameListStr) {
        const goodsNameList = JSON.parse(goodsNameListStr);
        
        if (!goodsNameList.map(item => item.value).includes(this.ruleForm.goodsName)) {
          goodsNameList.push({
            value: this.ruleForm.goodsName,
          });
          localStorage.setItem("goodsNameList", JSON.stringify(goodsNameList));
        }
      } else {
        localStorage.setItem(
          "goodsNameList",
          JSON.stringify([{ value: this.ruleForm.goodsName }])
        );
      }
    },

    submitFunc() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.loading) {
            return;
          }
          this.loading = true;
          if (this.ruleForm.invoiceStatus && !this.ruleForm.invoiceHead) {
            this.$message.warning("请选择发票信息");
            return false;
          }
          let url = "";
          let params = {};
          if (this.$route.query.batchOrder) {
            url = "/warranty/insure/modifyadd";
            params = {
              ...this.getParams(),
              orderNum: this.$route.query.orderNum,
            };
          } else {
            url = "/warranty/insure/add";
            params = { ...this.getParams(), goStatus: this.goStatus };
          }
          this.$post(url, params)
            .then((res) => {
              if (res && res.code === 200) {
                this.orderNum = res.data;
                this.payVisible = true;
                this.setOftenInsuranceData();
                this.setOftenInvoiceData();
                this.setGoodsNameList();
              } else {
                if (res && res.code === 9000) {
                  this.$confirm(res.msg, "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                  })
                    .then(() => {
                      this.goStatus = 0;
                      this.submitFunc();
                    })
                    .catch(() => {
                      this.goStatus = 1;
                    });
                }
              }
            })
            .finally(() => {
              this.loading = false;
            });
        }
      });
    },

    payDetermine() {
      let params = {};
      let url = "";
      if (this.$route.query.batchOrder) {
        params = {
          modifyOrderNum: this.orderNum,
          walletPassword: this.payForm.walletPassword,
        };
        url = "/warranty/insure/modifypay";
      } else {
        params = {
          orderNum: this.orderNum,
          walletPassword: this.payForm.walletPassword,
        };
        url = "/warranty/insure/pay";
      }
      this.$refs.payForm.validate((valid) => {
        if (valid) {
          if (this.loading) {
            return;
          }
          this.loading = true;
          this.$post(url, params)
            .then((res) => {
              if (res && res.code * 1 === 200) {
                this.$message.success("支付成功");
                console.log("this.isInsureAndDel", this.isInsureAndDel);
                if (this.isInsureAndDel) {
                  this.deleteDraft();
                } else {
                  this.$router.push("/reviewPolicy");
                }
              } else if (res && res.code * 1 === 500) {
                if (res.msg === "个人账户余额不足") {
                  // this.$message.error('')
                  this.$confirm(
                    "个人账户余额不足,请充值,充值后可在待支付里继续支付",
                    "提示",
                    {
                      confirmButtonText: "确定",
                      type: "warning",
                      showClose: false,
                      showCancelButton: false,
                    }
                  ).then(() => {
                    this.$router.push({
                      path: "/myWallet",
                    });
                  });

                  // this.showRecharge = true
                } else {
                  this.payForm.walletPassword = "";
                }
              }
            })
            .finally(() => {
              this.loading = false;
            });
        }
      });
    },

    getInfo() {
      const insureInfoId = this.$route.query.insureInfoId;
      return this.$get("/index/info", { insureInfoId }).then((res) => {
        if (res && res.code * 1 === 200) {
          this.minCost = res.data.data.minInsureFee;
          this.info = res.data.data;
          this.insureKindColumns = this.info.insureRateKinds.map((item) => {
            return {
              label: item.insureKindName,
              value: item.insureKindId,
            };
          });
          this.ruleForm.insureKindId =
            this.insureKindColumns &&
            this.insureKindColumns.length &&
            this.insureKindColumns[0].value;

          this.goodsNameColumns =
            this.info.insureRateKinds && this.info.insureRateKinds.length
              ? this.info.insureRateKinds[0].insureRateGoodss.map((item) => {
                  return {
                    label: item.goodsTypeName,
                    value: item.insureGoodsId,
                  };
                })
              : [];
        } else {
          this.info = {};
        }
        return this.info;
      });
    },
    getDetail() {
      this.$post("/warranty/insure/info", {
        orderNum: this.$route.query.orderNum,
      }).then((res) => {
        if (res && res.code * 1 === 200) {
          this.setDetail(res);
        }
      });
    },
    getDraftDetail() {
      this.$get("/warranty/darft/info", {
        warrantyDarftId: this.$route.query.warrantyDarftId,
      }).then((res) => {
        if (res && res.code * 1 === 200) {
          this.setDetail(res);
        }
      });
    },
    setDetail(res) {
      let startTime = "";
      const time = res.data.startTime;
      const today = moment().format("YYYY-MM-DD");
      const yesterday = moment().subtract(1, "days").format("YYYY-MM-DD");

      if (time) {
        if (moment(yesterday).isBefore(time)) {
          startTime = time;
        } else if (moment(yesterday).isAfter(time)) {
          startTime = today;
        } else {
          startTime = yesterday;
        }
      }
      startTime = startTime ? moment(startTime).toDate() : "";

      const insureExtendIds = res.data.insureExtendIds
        ? res.data.insureExtendIds.split(";").map((item) => Number(item))
        : [];

      //解决历史数据获取类型匹配不到置空
      const item =
        this.info.insureRateKinds &&
        this.info.insureRateKinds.find(
          (a) => a.insureKindId === this.ruleForm.insureKindId
        );
      const goodsTypeItem = item.insureRateGoodss.find(
        (a) => a.insureGoodsId === res.data.insureGoodsId
      );

      this.ruleForm.insureInfoId = res.data.insureInfoId;
      this.insureId = res.data.insureId;
      this.insuredId = res.data.insuredId;
      this.ruleForm.insureName = res.data.insureName;
      this.ruleForm.insureCertificateType = res.data.insureCertificateType;
      this.ruleForm.insureCertificateNumber = res.data.insureCertificateNumber;
      this.ruleForm.insuredName = res.data.insuredName;
      this.ruleForm.insuredCertificateType = res.data.insuredCertificateType;
      this.ruleForm.insuredCertificateNumber =
        res.data.insuredCertificateNumber;
      this.ruleForm.contactName = res.data.contactName;
      this.ruleForm.contactPhone = res.data.contactPhone;
      this.ruleForm.insureKindId = res.data.insureKindId;
      this.ruleForm.insureGoodsId = goodsTypeItem ? res.data.insureGoodsId : "";
      this.ruleForm.goodsType = res.data.goodsType;
      this.ruleForm.containerNumber = res.data.containerNumber.replace(
        /;/g,
        "\n"
      );
      // this.ruleForm.containerCount = res.data.containerCount;
      this.ruleForm.goodsName = res.data.goodsName;
      // this.ruleForm.middlePlace = res.data.middlePlace.split("/");
      this.ruleForm.remark = res.data.remark;
      this.ruleForm.transportTypeName = res.data.transportTypeName;
      this.ruleForm.transportTool = res.data.transportTool;
      this.ruleForm.packName = res.data.packName;
      // this.ruleForm.tagInvoiceWaybill = res.data.tagInvoiceWaybill;
      // this.ruleForm.shipNumber = res.data.shipNumber;
      this.ruleForm.startPlace = res.data.startPlace;
      this.ruleForm.endPlace = res.data.endPlace;
      this.ruleForm.startTime = startTime;
      this.ruleForm.insureExtendIds = insureExtendIds;
      this.ruleForm.totalFee = res.data.totalFee;
      this.ruleForm.insureRate = res.data.insureRate;
      this.ruleForm.insureFee = res.data.insureFee;
      this.oriFeeRate = deepClone(res.data.insureRate);
      this.ruleForm.invoiceStatus = !!(res.data.invoiceStatus * 1);
      this.invoiceType = res.data.invoiceStatus * 1;

      this.ruleForm.invoiceHead = res.data.invoiceHead;
      this.ruleForm.creditCode = res.data.creditCode;
      this.ruleForm.consigneeMail = res.data.consigneeMail;
      this.ruleForm.bankBranchName = res.data.bankBranchName;
      this.ruleForm.bankAccount = res.data.bankAccount;
      this.ruleForm.companyPhone = res.data.companyPhone;
      this.ruleForm.registerAddress = res.data.registerAddress;
      this.ruleForm.consigneePhone = res.data.consigneePhone;
      this.ruleForm.consigneeAddress = res.data.consigneeAddress;
    },
    setValuesToLabels(obj) {
      if (Array.isArray(obj)) {
        obj.forEach(this.setValuesToLabels);
      } else if (typeof obj === "object" && obj !== null) {
        obj.value = obj.label;
        if (Array.isArray(obj.children)) {
          this.setValuesToLabels(obj.children);
        }
      }
    },
    setInvoiceData(data) {
      this.ruleForm.invoiceStatus = data.invoiceStatus || false; //String**发票状态 0=不需要,1=普票,2=专票（必须）
      this.ruleForm.invoiceHead = data.invoiceHead; // String**发票抬头
      this.ruleForm.consigneePhone = data.consigneePhone; // String**收货人电话
      this.ruleForm.consigneeAddress = data.consigneeAddress; // String**收货人地址
      this.ruleForm.registerAddress = data.registerAddress; // String**注册地址
      this.ruleForm.creditCode = data.creditCode; //String**统一社会信用代码
      this.ruleForm.consigneeMail = data.consigneeMail; //String**收件人邮箱
      this.ruleForm.companyPhone = data.companyPhone; //String**电话号码
      this.ruleForm.bankAccount = data.bankAccount; //String**银行账号
      this.ruleForm.bankBranchName = data.bankBranchName; //String**支行名称
    },
    getInsureId() {
      this.applicantList.forEach(item => {
        if (item.insureName === this.ruleForm.insureName && item.insureCertificateType == this.ruleForm.insureCertificateType && item.insureCertificateNumber === this.ruleForm.insureCertificateNumber && item.contactName === this.ruleForm.contactName && item.contactPhone === this.ruleForm.contactPhone) {
          this.insureId = item.insureId
        }
      })
    },
    getInsuredId() {
      this.insuredList.forEach(item => {
        if (item.insuredName === this.ruleForm.insuredName && item.insuredCertificateType == this.ruleForm.insuredCertificateType && item.insuredCertificateNumber === this.ruleForm.insuredCertificateNumber) {
          this.insuredId = item.insuredId
        }
      })
    }
  },
  mounted() {
    const goodsNameListStr = localStorage.getItem("goodsNameList");
    this.restaurants = goodsNameListStr ? JSON.parse(goodsNameListStr) : [];
    this.$nextTick(() => {
      this.ruleForm.startTime = moment().toDate();
    });

    if (this.isHighway) {
      // this.ruleForm.transportTool = "汽车";
    }

    if (this.$route.query.templateName === "集装箱货运险") {
      this.ruleForm.transportTypeName = "集装箱海运";
    } else {
      this.ruleForm.transportTypeName = "公路";
    }
    this.setValuesToLabels(provinceAndCityData);

    this.getInvoicesList().then(() => {
      const oftenInvoiceData = localStorage.getItem("oftenInvoiceData");

      if (oftenInvoiceData) {
        this.setInvoiceData(JSON.parse(oftenInvoiceData));
      } else {
        if (this.invoiceList.length) {
          this.setInvoiceData(this.invoiceList[0]);
        }
      }
    });
    Promise.all([this.getApplicantList(), this.getInsuredList()]).then(() => {
      const oftenInsuranceData = localStorage.getItem("oftenInsuranceData");
      if (oftenInsuranceData) {
        this.setAccountInfo(JSON.parse(oftenInsuranceData));
      } else {
        if (this.applicantList.length) {
          this.ruleForm.insureName = this.applicantList[0].insureName;
          this.ruleForm.insureCertificateType = this.applicantList[0].insureCertificateType;
          this.ruleForm.insureCertificateNumber = this.applicantList[0].insureCertificateNumber;

          this.ruleForm.contactName = this.applicantList[0].contactName;
          this.ruleForm.contactPhone = this.applicantList[0].contactPhone;
        }

        if (this.insuredList.length) {
          this.ruleForm.insuredName = this.insuredList[0].insuredName;
          this.ruleForm.insuredCertificateType = this.insuredList[0].insuredCertificateType;
          this.ruleForm.insuredCertificateNumber = this.insuredList[0].insuredCertificateNumber;
        }
      }
      this.getInsureId()
      this.getInsuredId()
    });

    this.getInfo().then(() => {
      if (this.$route.query.orderNum) {
        this.getDetail();
      }
      if (this.$route.query.warrantyDarftId) {
        if (!this.$route.query.copy) {
          this.warrantyDarftId = this.$route.query.warrantyDarftId;
        }
        this.getDraftDetail();
      }
      if (this.$route.query.getInsuredDataFromCache) {
        const insuredData = localStorage.getItem("insuranceData");
        this.setDetail({ data: JSON.parse(insuredData) });

        if (
          JSON.parse(insuredData) &&
          !JSON.parse(insuredData).insureName &&
          this.applicantList.length
        ) {
          this.ruleForm.insureName = this.applicantList[0].insureName;
          this.ruleForm.insureCertificateType = this.applicantList[0].insureCertificateType;
          this.ruleForm.insureCertificateNumber = this.applicantList[0].insureCertificateNumber;

          this.ruleForm.contactName = this.applicantList[0].contactName;
          this.ruleForm.contactPhone = this.applicantList[0].contactPhone;
        }

        if (
          JSON.parse(insuredData) &&
          !JSON.parse(insuredData).insuredName &&
          this.insuredList.length
        ) {
          this.ruleForm.insuredName = this.insuredList[0].insuredName;
          this.ruleForm.insuredCertificateType = this.insuredList[0].insuredCertificateType;
          this.ruleForm.insuredCertificateNumber = this.insuredList[0].insuredCertificateNumber;
        }

        if (
          JSON.parse(insuredData) &&
          !JSON.parse(insuredData).invoiceHead &&
          this.invoiceList.length
        ) {
          this.setInvoiceData(this.invoiceList[0]);
        }
      }
    });
  },
};
</script>
<style scoped lang="less">
.editAccount {
  /* background-color: #f5f5f5; */
  /* height: 100%; */
  width: 100%;
}

.pay {
  .el-form-item {
    margin-bottom: 12px;
  }
}

.dialog {
  /deep/.el-form-item {
    margin-bottom: 0px;
  }
}

.agreement-box {
  cursor: pointer;
  color: blue;
}
</style>
